<template>
<div class="container" :class="cc()">
    <div class="formwaper">
        <p class="title">{{$t('btns.a')[0]}}</p>
        <p class="subtitle">{{$t('index.subTitle')}}</p>
        <a-form-model id="components-login" :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" ref="ruleForm" :model="form" :rules="rules">
            <a-form-model-item required prop="email" :label="$t('index.from')[1]">
                <a-input v-model="form.email" :placeholder="$t('index.placeholder')[3]">
                    <a-icon slot="prefix" type="mail" style="color: rgba(0,0,0,.25)" />
                </a-input>
            </a-form-model-item>
            <!-- <a-form-model-item required prop="verifycode" :label="$t('index.from')[4]">
                <a-input v-model="form.verifycode" :placeholder="$t('index.from')[4]">
                    <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                    <a-button slot="addonAfter" type="primary" class="verifyButton" :loading='verifycodeLoding' @click="handleGetMailCode">
                       {{$t('index.from2')[5]}}
                    </a-button>
                </a-input>
            </a-form-model-item> -->
            <a-form-model-item required prop="password" :label="$t('index.from')[6]">
                <a-input v-model="form.password" type='password' :placeholder="$t('index.from')[6]">
                    <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                </a-input>
            </a-form-model-item>
            <div class="continfo" style="padding-left:60px">
                    <p class="time">{{$t('index.infotel')[1]}}<span class="link" @click="handleRouter">{{$t('index.infotel')[3]}}</span></p>
            </div>
            <div style="text-algin:center">
                <a-button type="primary" @click="handleSubmit" class="login-form-button">
                    {{$t('btns.a')[0]}}
                </a-button>
            </div>
        </a-form-model>
    </div>
</div>
</template>

<script>
import dataJson from "~/static/data";
import {
    getMailCodeApi
} from "~/assets/js/api";
import countTo from "vue-count-to";
import {
    getEncryptMD5
} from "~/assets/js/encrypt";

import {
    mapGetters
} from "vuex";
export default {
    name: 'index',
    components: {
        countTo
    },
    head() {
        return {
            title: "Onlogy"
        };
    },
    data() {
        return {
            form: {
                email: '',
                verifycode: '',
                password:'',
            },
            verifycodeLoding: false,
            rules: {
                verifycode: [{
                    required: true,
                    message: '请输入验证码'
                }],
                email: [{
                        required: true,
                        message: '邮箱不能为空',
                        trigger: 'blur'
                    },
                    {
                        required: true,
                        pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                        message: '邮箱格式不正确',
                        trigger: 'blur'
                    },
                    {
                        min: 3,
                        max: 50,
                        message: 'Length should be 3 to 50',
                        trigger: 'blur'
                    },
                ],
            }
        }
    },
    computed: {
        ...mapGetters(['indexQuick', 'info', 'main_url']),
    },
    beforeMount() {
        this.isMobile = this.storage.mb();
    },
    mounted() {
        //this.$wow();
        this.dots = this.isMobile ? false : true;
    },
    methods: {
        cc() {
            //return ` ${this.isMobile?'ismobile':this.$store.state.size}`
        },
        wow() {
            if (process.browser) {
                // 在页面mounted生命周期里面 根据环境实例化WOW
                new WOW({
                    live: false,
                    offset: 0
                }).init();
            }
        },
        handleGetMailCode() {
            console.log(111)

            const pattern = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
            if (!this.form.email) {
                this.$message.error('请输入登录邮箱');
            } else if (!pattern.test(this.form.email)) {
                this.$message.error('邮箱格式有误');
            } else {
                this.getMailCode()
            }
        },

        handleSubmit(e) {
            e.preventDefault();
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.handlelogin();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
         handleRouter() {
            //this.$store.dispatch('Login',{}).then(())
            this.$router.push({
                path: "/registered"
            });
        },
        handlelogin() {
            this.$store.dispatch("Login", {...this.form,password:getEncryptMD5(this.form.password)}).then((data) => {
                console.log(data, 'datadatadata')
                this.$message.info(data.message || this.$t('index.infotel[5]'));
                this.$store.dispatch('userInfo',{}).finally(()=>{
                  this.$router.push({
                    path: '/'
                  })
                })

            }).catch((err) => {
                console.log(err, 'err')
                err.data||this.$message.warn(err.data.detail);
            });
        },
        getMailCode() {
            this.verifycodeLoding = true;
            getMailCodeApi(this.form).then((data) => {
                this.$message.info(data.message || '获取验证码成功!');
            }).catch((err) => {
                console.log(err, 'err')
                err.msg ? this.$message.error(err.msg) : '';
                this.verifycodeLoding = false;
            })
        }
    },
}
</script>

<style>

</style>
<style lang="less" scoped>
.verifyButton {
    height: 38px;
    width: 100%;
    border-radius: 0;
}

.container {
    font-family: '微软雅黑', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    margin-bottom: 60px;

    /deep/ .ant-input-group-addon {
        padding: 0;
    }
}

.title {
    color: #1f1f1f;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 6px;
}

.subtitle {
    color: #8c8c8c;
    font-size: 22px;
}
.link{
  color: #1890ff;
  cursor: pointer;
   padding-left: 10px;
}
#components-login {
    width: 100%;

    /deep/ .ant-input {
        height: 38px;
        line-height: 38px;
        font-size: 18px;
    }

    .lastitem {
        margin-bottom: 0px;
    }

    .continfo {
        margin: 10px 0px 20px 0px;
        padding-left: 10px;
        text-align: left;

        .tel {
            font-family: emoji;
            font-size: 16px;
            font-weight: 600;
            color: #1f1f1f;
            margin-bottom: 10px;
        }
    }
}

.formwaper {
    width: 600px;
}

.login-form-button {
    width: 240px;
    height: 48px;
    font-size: 22px;
}
</style>
